<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 花言支付宝充值备用-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <link rel="stylesheet" href="/static/css/pay/recharge.css">
    <script src="/static/js/common/flexible.js"></script>
    <title>花言充值</title>
    <script src="/static/js/common/jquery.js"></script>
    <script src="/static/js/init.js"></script>
    <script src="/static/js/util.js"></script>
    <script src="/static/js/fastclick.js"></script>

    <script>
        $(function() {
            FastClick.attach(document.body);
        });
    </script>
    <style>
        li{
            -webkit-tap-highlight-color:transparent;
        }
        #sure,#change{-webkit-tap-highlight-color:transparent;}
        html,body{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
        /* 新增*/
        .loader {
            -webkit-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite;
            border: 0.1rem solid #ddd;
            border-top: 0.1rem solid #42a5f5;
            border-radius: 50%;
            height: 1rem;
            width: 1rem;
            position: absolute;
            top:40%;
            left: 50%;
            margin-left: -0.75rem;
        }

        @-webkit-keyframes spin {
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes spin {
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        .loader-con {
            margin: 0 auto;
            position: fixed;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            /*background: rgba(0,0,0,0.4);*/
        }
        .loader-con>p{
            text-align: center;
            position: absolute;
            width: 6rem;
            top:48%;
            left: 50%;
            margin-left: -3rem;
            font-size: 0.4rem;
            color: #120411;
        }
        .hide{display: none}
        * { touch-action: none; }
    </style>
</head>
<body>
<script src="/static/js/Monitor.js"></script>
<div id="pay_result"></div>
<div class="contain">
    <div class="top">
        <div class="top-number">
            <input type="text" id="custormId" placeholder="请输入您要充值的花言号">
            <span id="sure">确认</span>
        </div>
        <div class="top-NumInfo hide" id="top-NumInfo" data-flag="false">
            <div class="info">
                <dl>
                    <dt><img id="photo" src="" alt=""></dt>
                    <dd>
                        <p><b>昵&nbsp;&nbsp;称：</b><i id="nickName"></i></p>
                        <p><b>花言号：</b><strong id="customerId"></strong></p>
                    </dd>
                </dl>
                <span id="change">更换花言号</span>
            </div>
            <!--<div class="ddd" style="font-size: 10px"></div>-->
            <p>看清楚自己的花言号和昵称，充错不退哦～</p>

        </div>
    </div>
    <div class="main-box">
        <ul class="tab">
            <li class="tab-zfb active" data-pay="1" >
                <img src="/static/img/pay/zfb.png" alt="">
                <b>支付宝支付</b>
                <span class="tuijian">推荐</span>
            </li>
            <li class="tab-weixin "  data-pay="2" >
                <img src="/static/img/pay/weixin.png" alt="">
                <b>微信支付</b>
            </li>
        </ul>
        <div class="tab-list">
            <ul class="list-zfb" id="tab_alipay">

            </ul>
            <ul class="list-weixin hide" id="tab_weixin">

            </ul>
        </div>
    </div>
    <div class="message hide" id="message"><span>请输入完整提现信息！</span></div>

</div>
<div class="loader-con hide">
    <div class="loader"></div>
    <p>加载中...</p>
</div>
<script>
    // var custormId=null;
    var custormId=getParameter("x-access-id")? getParameter("x-access-id") : 0;
    var accessToken = getParameter("x-access-token") ? getParameter("x-access-token") : '';
    var ua = getParameter("x-ua") ? getParameter("x-ua") : 'unknown';
    var version=getParameter("x-version-code") ? getParameter("x-version-code") : 0;
    var channel=getParameter("x-channel") ? getParameter("x-channel") : 'unknown';
    // 初始化
    $(function () {
        //    tab切换
        $(".tab").find("li").each(function () {
            $(this).click(function () {
                var i=$(this).index();
                var payMode=$(this).attr("data-pay");
                $(".tab").find("li").removeClass("active");
                $(".tab-list").find("ul").addClass("hide");
                $(this).addClass("active");
                $(".tab-list").find("ul").eq(i).removeClass("hide");

            });
        })
        //充值信息
        $("#sure").click(function () {
            custormId=$("#custormId").val();
            if(custormId== ""){
                $("#message>span").html("请输入花言号");
                $("#message").removeClass("hide");
                hideMsg();
            }
            if(custormId){
                info(custormId);
            }
        });
        //跟换充值信息
        $("#change").click(function () {
            $("#custormId").val("");
            $(".top-NumInfo").addClass("hide").siblings(".top-number").removeClass("hide");
        });
        //支付宝充值列表初始化
        zfbOrWeixinList(1);
        zfbOrWeixinList(2);
        clickList("#tab_alipay");
        clickList("#tab_weixin");
        //    修改
        if(custormId){
            info(custormId);
        }
    })
    //支付宝和微信充值列表
    function zfbOrWeixinList(payMode) {
        $.ajax({
            url: genUrl("/wallet/getCommodityList"),
            type: 'GET',
            contentType:"application/json",
            data: {"payMode":payMode,"tradePage":'recharge'},
            dataType: 'json',
            headers: {
                "x-access-id": custormId,
                "x-access-token": accessToken,
                "x-ua": ua,
                "x-version-code": version,
                "x-channel": channel
            },
            async: false,
            success: function (res) {
                if(res.code!=0){
                    alert(res.message);
                    return;
                }
                var list=res.data.walletCommodities;
                var str="";
                if(list){
                    for(var i=0;i<list.length;i++){
                        var str1=list[i].coinPresent>0 ? " + "+list[i].coinPresent+list[i].coinUnit: "";
                        var str2=list[i].tapechatNum>0 ? " + "+list[i].tapechatNum+"情书":"";
                        str+='<li data-commodityId="'+list[i].id+'" data-payMode="'+list[i].payMode+'">';
                        str+='<p>'+list[i].coin+list[i].coinUnit+'<b>'+str1+str2+'</b></p>';
                        str+='<span>￥'+list[i].price+'</span>';
                        str+='</li>';
                    }
                }
                if(payMode=='1'){
                    $(".list-zfb").html(str);
                }else{
                    $(".list-weixin").html(str);
                }
            }
        });
    }
    //绑定支付宝充值列表点击事件
    function doPay(commodityId,payMode) {
        if(payMode==1){
            $.ajax({
                url: genUrl("/alipay/back/createOrderByH5"),
                type: 'GET',
                contentType: "application/json",
                data: {"commodityId":commodityId,"tradePage":'recharge'},
                dataType: 'json',
                async: true,
                headers: {
                    "x-access-id": custormId,
                    "x-access-token": accessToken,
                    "x-ua": ua,
                    "x-version-code": version,
                    "x-channel": channel
                },
                success: function (obj) {
                    if(obj.code!=0){
                        alert(obj.message);
                        setTimeout(function () {
                            $(".loader-con").addClass("hide");
                        },1000)
                        return;
                    }
                    setTimeout(function () {
                        $(".loader-con").addClass("hide");
                    },1000)
                    $("#pay_result").html(obj.data.orderInfo);
                    document.forms[0].submit();
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $(".loader-con").addClass("hide");
                    console.log("status:" + XMLHttpRequest.status + ", readyState:" + XMLHttpRequest.readyState + ", textSatatus:" + textStatus);
                }
            });
        }else if(payMode==2){
            var params = {"commodityId":commodityId, "wxTradeType":"MWEB","tradePage":'recharge'};
                   // $.extend(params, {"mchId": "1521607581"});//新增商户号时调试用
            $.ajax({
                url: genUrl("/wxpay/unifiedOrderByH5"),
                type: 'GET',
                contentType: "application/json",
                data: params,
                dataType: 'json',
                async: true,
                headers: {
                    "x-access-id": custormId,
                    "x-access-token": accessToken,
                    "x-ua": ua,
                    "x-version-code": version,
                    "x-channel": channel
                },
                success: function (obj) {
                    if(obj.code!=0){
                        alert(obj.message);
                        setTimeout(function () {
                            $(".loader-con").addClass("hide");
                        },1000)
                        return;
                    }
                    window.location.href = obj.data.mwebUrl;
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $(".loader-con").addClass("hide");
                    console.log("status:" + XMLHttpRequest.status + ", readyState:" + XMLHttpRequest.readyState + ", textSatatus:" + textStatus);
                }
            });
        }else{
            alert("未知异常");
        }
    };
    //调用会员信息信息
    function info(custormId) {
        $.ajax({
            url: genUrl("/web/getCustomerInfo"),
            type: 'GET',
            contentType:"application/json",
            data: {"customerId":custormId,"tradePage":'recharge'},
            dataType: 'json',
            async: false,
            success: function (res) {

                if(res.code==0){
                    $(".top-number").addClass("hide").siblings(".top-NumInfo").removeClass("hide");
                    var nickName=res.data.info.nickName;
                    var photo=res.data.info.photo;
                    var customerId=res.data.info.customerId;
                    $("#nickName").html(nickName);
                    $("#photo").attr("src",photo);
                    $("#customerId").html(customerId);
                    $("#top-NumInfo").attr("data-flag","true");
                }else{
                    $("#message>span").html("花言会员不存在");
                    $("#message").removeClass("hide");
                    hideMsg();
                    $("#top-NumInfo").attr("data-flag","false");
                }
            }
        });
    }
    //间隔2s消失
    function hideMsg(){
        setTimeout(function () {
            $("#message").addClass("hide");
        },2000);
    }
    //子代点击事件
    function clickList(ele){
        $(ele).on("click","li",function (e) {
            var cls=$("#top-NumInfo").attr("class");
            var commodityId=$(this).attr("data-commodityId");
            var payMode=$(this).attr("data-payMode");
            if(cls.indexOf("hide")==-1){
                $(".loader-con").removeClass("hide");
                $(this).css("background","#eee")
                $(this).siblings("li").css("background","none");
                doPay(commodityId,payMode);
            }else{
                $("#message>span").html("请输入花言聊号");
                $("#message").removeClass("hide");
                hideMsg();
            }
        });
    }
</script>
</body>
</html>